<template lang="html">
  <div class="myvedio">
    <router-link tag="div" class="video" to="/index/home/Details">
    	<img src="../../images/jiantou.png">
    </router-link>
    <video width="100%" controls="controls" autoplay="autoplay">
    		<source src="../../me/images/video/video.mp4" type="video/mp4">
    	您的浏览器不支持。
    </video>
    <div class="video-bot">
    	<span>收藏</span>
    	<span>分享</span>
    	<span>笔记</span>
    	</ul>
    </div>
    <div class="teacher">
    	<div class="img">
    		<img src="../../images/timg.jpg">
    	</div>
    	
    	<div class="teacher-t">
	    	<p>戴晓茹老师</p>
	    	<span>身子初中语文老师，有多年语文教学经验。</span>
    	</div>
    </div>
    <div class="detailed">
    	<p>5单元详细讲解</p>
    	<span>评分：8.5</span>
    	<ul>
    		<li><a href="#">第一单元</a></li>
    		<li><a href="#">第二单元</a></li>
    		<li><a href="#">第三单元</a></li>
    		<li><a href="#">第四单元</a></li>
    		<li><a href="#">第五单元</a></li>
    	</ul>
    	<div class="process">
    		<ul>
    			<li class="round"></li>
    			<li class="line"></li>
    			<li class="round"></li>
    			<li class="line"></li>
    			<li class="round"></li>
    			<li class="line"></li>
    			<li class="round"></li>
    			<li class="line"></li>
    			<li class="round"></li>
    		</ul>
    		<ul class="process-text">
    			<li>在山的那边</li>
    			<li>在山的那边</li>
    			<li>在山的那边</li>
    			<li>在山的那边</li>
    			<li>在山的那边</li>
    		</ul>
    	</div>
    </div>
    <div class="recommend">
    	<p>相关推荐</p>
    	<Videolist />
    </div>
  </div>
</template>

<script>
import Videolist from "./video-list"

export default {
  name:"myvedio",
  data(){
    return{

    }
  },
  components:{
    Videolist
  }
} 
</script>

<style scoped lang="less">
html{
	background-color: #CCCCCC;
}
.video{
	width: 100%;
	height: 50/50rem;
	background-color: #666666;
	line-height: 35/50rem;
}
.video img{
	height: 30/50rem;
	margin-left: 10/50rem;
}
.video-bot{
	box-sizing: border-box;
	margin-bottom: 10/50rem;
	margin-top: -13/50rem;
	background-color: #fff;
	height: 50/50rem;
	text-align: right;
	line-height: 5/50rem;
	padding: 10/50rem;
}
.video-bot span{
	font-size: 16/50rem;
	border: 1/50rem solid #000;
	padding: 2/50rem 5/50rem;
}
.teacher{
	overflow: hidden;
	background-color: #fff;
	line-height: 15/50rem;
	margin-bottom: 10/50rem;
}
.teacher img{
	width: 50/50rem;
	height: 50/50rem;
	border-radius: 50%;
	margin:20/50rem;
}
.teacher-t ,.img{
	float: left;
}
.teacher-t p{
	margin-top: 20/50rem;
	font-size: 20/50rem;
}
.teacher span{
	font-size: 12/50rem;
}
.detailed{
	background-color: #fff;
	line-height: 20/50rem;
	margin-bottom: 10/50rem;
}
.detailed p{
	padding-top: 10/50rem;
	font-size: 25/50rem;
	margin-left: 20/50rem;
}
.detailed span{
	font-size: 14/50rem;
	color: #CCCCCC;
	margin-left: 20/50rem;
}
.detailed ul{
	padding:0 20/50rem;
	border-bottom: 1/50rem solid #ccc;
	margin-bottom: 10/50rem;
}
.detailed ul li{
	display: inline-block;
	font-size: 10/50rem;
	margin:10/50rem 0;
}
.detailed ul li a{
	border-right: 1/50rem solid #ccc;
	padding-right: 5/50rem;
}
.detailed .process{
	height: 50/50rem;
	overflow: hidden;
}
.detailed .process ul{
	border: 0;
	padding: 0 40/50rem;
}
.detailed .process ul li{
	float: left;
	background-color: #ccc;

}
.detailed .process ul li.round{
	width: 10/50rem;
	height: 10/50rem;
	border-radius: 50%;
	margin-top: 5/50rem;
}
.detailed .process ul li.line{
	border: 1/50rem;
	width: 60/50rem;
	height: 1/50rem;
}
.detailed .process .process-text{
	padding: 0 15/50rem;
}
.detailed .process .process-text li{
	background-color: #fff;
	margin:0;
	margin-right: 8/50rem;
}
.recommend p{
	background-color: #fff;
	font-size: 18/50rem;
	padding: 10/50rem 20/50rem;
	margin-bottom: 2/50rem;
}

</style>
